<template>
  <div class="blog-comment card-item">
    <div class="comment-total">
      <span>共 {{ blogStore.blogNestedCommentList.length }} 条评论</span>
    </div>

    <div class="comment-list">
      <blog-comment-item v-for="(item, index) in blogStore.blogNestedCommentList" :key="index"
                         :comment="item.comment" :replyList="item.replies"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import BlogCommentItem from '@/components/Comment/BlogCommentItem.vue'
import { useBlogStore } from '@/store/blog.ts'

const blogStore = useBlogStore()
</script>

<style lang="scss">
.blog-comment {
  width: 100%;
  padding: 10px;

  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>
